<template>
  <div class="user-content">
    <div class="user-item">
      <div class="user-info">
        <img
        class="img"
        :src="user.photo" alt="">
        <div class="info">
          <div class="name">{{user.name}}</div>
          <div class="date">2018-09-08</div>
        </div>
      </div>
      <div class="articleItem">用户文章内容的接口有些问题，这部分没做成</div>
      <div class="handle-way">
        <span>
          <van-icon class="icon" name="chat-o" />
          评论</span>
        <span>
          <van-icon class="icon" name="good-job-o" />
          点赞</span>
        <span>
          <van-icon class="icon" name="star-o" />
          收藏</span>
      </div>
    </div>
  </div>
</template>

<script>
// import ArticleItem from '@/components/article-item'
import { getChoiceUserInfo } from '@/api/user'
export default {
  name: 'UserContent',
  components: {
  },
  props: {
    userId: {
      type: [Number, String, Object],
      required: true
    }
  },
  data () {
    return {
      user: {},
      userArticles: []
    }
  },
  created () {
    this.loadUserInfo()
  },
  methods: {
    async loadUserInfo () {
      try {
        const { data } = await getChoiceUserInfo(this.userId)
        this.user = data.data
        this.$emit('userInfo', this.user)
      } catch (err) {
        this.$toast('获取用户信息失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
.user-content {
  margin-top: 10px;
  /* background-color: #fff; */
  .user-item {
    margin-bottom: 10px;
    background-color: #fff;
    .user-info {
      padding: 20px;
      display: flex;
      .img {
        margin-right: 20px;
        width: 76px;
        height: 76px;
        border-radius: 50%;
      }
      .info {
        margin-bottom: 40px;
        flex: 1;
        .name {
          margin-bottom: 17px;
          font-size: 28px;
          color: #222222;
          font-weight: 700;
        }
        .date {
          font-size: 23px;
          color: #999999;
        }
      }
    }
    .articleItem {
      padding: 20px;
      font-size: 30px;
      color: #3a3a3a;
    }
    .handle-way {
      display: flex;
      margin-top: 40px;
      border-top: 1px solid #ccc;
      span {
        flex: 1;
        text-align: center;
        line-height: 93px;
        font-size: 28px;
        color: #333333;
        border-right: 1px solid #ccc;
        .icon {
          font-size: 40px;
        }
      }
    }
  }
}
</style>
